<template>
  <!-- <div v-if="loading">loading...</div>
  <div v-else-if="error">{{ error }}</div>
  <div v-else-if="data">
    <ul>
      <li v-for="(item, i) in data" :key="i">
        {{ item.id }}---{{ item.title }}
      </li>
    </ul>
  </div>
  <div v-else>暂无数据</div> -->

  <div ref="divRef"></div>

  <hr />
  <!-- <ul>
    <li v-for="(item, i) in list" :key="i" :ref="(el) => (elms[i] = el)">
      {{ item }}
    </li>
  </ul>

  <button @click="onClickHandler">push 9</button>

  <hr /> -->
  <Children01 />
</template>

<script lang="ts">
import { defineComponent, onMounted, onUpdated, provide } from "vue";
// 导入ref
import { ref } from "vue";
import axios from "axios";
// 导入 子组件
import Children01 from "@/components/day02/Children01.vue";
export default defineComponent({
  name: "App",
  // 组合式API入口

  setup() {
    // 定义参数
    // data 接受
    const data = ref(null);
    const loading = ref(false);
    const error = ref(null);
    // 发送请求方法
    async function getPosts() {
      loading.value = true;
      try {
        // 发送请求
        let response = await axios.get(
          "https://jsonplaceholder.typicode.com/posts"
        );
        data.value = response.data;
      } catch (err: any) {
        error.value = err.message;
      }
      // 更新loading状态
      loading.value = false;
    }
    // 调用
    getPosts();
    const divRef = ref(null);
    onMounted(() => {
      console.log(divRef.value);
    });

    const list = ref(["1", "2", "3", "4"]);
    const elms = ref([]);
    const onClickHandler = () => {
      list.value.push("9");
    };

    //  观察elms 状态
    onMounted(() => {
      console.log(elms.value, "onmounted");
    });
    onUpdated(() => {
      console.log(elms.value, "onupdated");
    });

    // 定义·person
    const person = ref({ name: "lili" });
    const changePersonName = () => {
      person.value.name = " haha";
    };
    // 暴露
    provide("person", person);
    provide("changePersonName", changePersonName);
    // 返回值
    return { data, error, loading, divRef, list, elms, onClickHandler };
  },
  components: {
    Children01,
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
